<template>
	<view id="bigBox">
		<view>
			<view id="header">
				<text>发布活动</text>

				<view>
					<button size="mini" id="faBu" @click="addAct">发布</button>
				</view>
			</view>
			<view id="oInp"><input type="text" placeholder="输入标题..."></view>
			<view>
				<view id="buMen">
					<view>
						<picker mode="selector" :value="index" :range="array" @change="dataChange">
							<view class="ziTi">
								{{array[index]==null?'选择主办部门':array[index]}}
							</view>
						</picker>
					</view>
					<view>
						<img src="../../static/icons/f11.png" alt="">
					</view>
				</view>
			</view>
			<view id="box1">
				<view>
					<view id="buMen">
						<view>
							<picker mode="date"  :value="y" @change="dataChange1">
								<view class="ziTi">
								<text>{{y==null?'报名开始时间':y}}</text>

								</view>
							</picker>
						</view>
						<view>
							<img src="../../static/icons/f11.png" alt="">
						</view>
					</view>
				</view>
				<view>
					<view id="buMen">
						<view>
							<picker mode="date" @change="dataChange2"  :value="y1">
								<view class="ziTi">
									{{y1==null?'选报名结束时间':y1}}
								</view>
							</picker>
						</view>
						<view>
							<img src="../../static/icons/f11.png" alt="">
						</view>
					</view>
				</view>
			</view>
			<view id="box1">
				<view>
					<view id="buMen">
						<view>
							<picker mode="date"  :value="y2" @change="dataChange3">
								<view class="ziTi">
								<text>{{y2==null?'活动开始时间':y}}</text>
			
								</view>
							</picker>
						</view>
						<view>
							<img src="../../static/icons/f11.png" alt="">
						</view>
					</view>
				</view>
				<view>
					<view id="buMen">
						<view>
							<picker mode="date" @change="dataChange4"  :value="y3">
								<view class="ziTi">
									{{y3==null?'活动结束时间':y3}}
								</view>
							</picker>
						</view>
						<view>
							<img src="../../static/icons/f11.png" alt="">
						</view>
					</view>
				</view>
			</view>
			<view>
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入活动内容"></textarea>
				<view id="tuPian">
					<text @click="chooseImg" v-if="imgArr.length?flase:true">+</text>
					<img  v-for="(item) in imgArr" :src="item" mode="" @click="previewImg(item)" id="tuPian1">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {





		data() {
			return {
				index: null,
				array: ['纪律不', '安全部'],
				y: null,
				y1:null,
				y2:null,
				y3:null,
				imgArr:[],
			

			}
		},

		methods: {
			dataChange: function(e) {

				this.index = e.target.value
			},
			dataChange1: function(event) {
				console.log(event.detail.value)
				this.y= event.detail.value
			
			
			
			},
			dataChange2: function(event) {
				console.log(event.detail.value)
				this.y1= event.detail.value
			
			
			
			},
			dataChange3: function(event) {
				console.log(event.detail.value)
				this.y2= event.detail.value
			
			
			
			},
			dataChange4: function(event) {
				console.log(event.detail.value)
				this.y3= event.detail.value
			
			
			
			},
			chooseImg(){
				uni.chooseImage({
					count:5,
					success:res=>{
						this.imgArr=res.tempFilePaths
					}
				})
			},
			previewImg(current){
				uni.previewImage({
					current,
					urls:this.imgArr,
					loop:true,
					indicator:"default"
				})
				
			},
			addAct(){
				
				
			}

		}
	}
</script>

<style lang="less">
	#tuPian{
		font-size: 200rpx;
		background-color: rgb(242,242,242);
		height: 300rpx;
		border-radius: 30rpx;
		color: rgb(199,199,199);
		text-align: center;
	}
	#tuPian1{
		width: 740rpx;
		height: 300rpx;
		
	}
	#bigBox {
		padding: 30rpx;

	}

	#header {
		display: flex;
		justify-content: space-between;

		text {
			margin-top: 20rpx;
			font-size: 40rpx;
		}


	}

	#faBu {
		background-color: #F9CC66;
		margin-top: 5rpx;

	}

	img {
		width: 60rpx;
		height: 60rpx;
	}

	#buMen {
		display: flex;
		justify-content: space-between;
		margin-top: 110rpx;

	}

	#oInp {
		margin-top: 70rpx;
	}

	.ziTi {
		color: #9B9B9B;

	}
	#box1{
		display: flex;
		justify-content: space-between;
	}
</style>

